/**
 * Created by yujianfu on 2016/11/10.
 */
import React, {Component, PropTypes} from 'react'
import {Card, Table, Icon, message, Popover, Input, Button} from 'antd'
import Styles from '../../../finance/common/detail/Index.less'
import {fetchPost} from '../../../../utils/request'

class Contact extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      userId: props.userId,
      data: [],
      message: '',
      timer: null,
      id: props.id,
    }
  }

  componentWillReceiveProps (props) {
    if (this.state.userId !== props.userId) {
      this.setState({
        userId: props.userId,
        id: props.id
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount () {
    this.getData()
  }

  componentWillUnmount () {
    clearTimeout(this.state.timer)
  }

  getData () {
    if (this.state.userId != null) {
      fetchPost(`/user/${this.state.userId}/contact/info`, {}).then(json => {
        if (json.data != null && json.code === 0) {
          this.setState({
            data: json.data.contacts
          })
        } else {
          this.setState({
            data: [],
            message: json.msg
          })
        }
      })
    } else {
      this.setState({
        data: []
      })
    }
  }

  message () {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o' /> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  showSend (type, name, relation, mobile) {
    let content = ''
    let buttonContact = 'Confirm'
    if (type === 1 && relation !== 'Self') {
      return <div style={{width: 300}}>
        <Input addonBefore='Name：' defaultValue={name} onBlur={(e) => {
          name = e.target.value
        }} />
        <Input addonBefore='Reference：' defaultValue={relation} onBlur={(e) => {
          relation = e.target.value
        }} />
        <Input addonBefore='Phone：' defaultValue={mobile} onBlur={(e) => {
          mobile = e.target.value
        }} />
        <div style={{overflow: 'hidden'}}>
          <Button style={{float: 'right'}} type='primary' size='small'
                  onClick={(e) => this.showContent(type, name, relation, mobile, content)}>{buttonContact}</Button>
        </div>
      </div>
    }

    return <div style={{width: 300}}>
      <Input addonBefore='Name：' defaultValue={name} onBlur={(e) => {
        name = e.target.value
      }} />
      <Input addonBefore='Reference：' defaultValue={relation} onBlur={(e) => {
        relation = e.target.value
      }} />
      <Input addonBefore='Phone：' defaultValue={mobile} onBlur={(e) => {
        mobile = e.target.value
      }} />
      <Input addonBefore='Content：' type='textarea' placeholder='Pls entry the content' onBlur={(e) => {
        content = e.target.value
      }}
             autosize={{minRows: 4, maxRows: 6}} />
      <div style={{overflow: 'hidden'}}>
        <Button style={{float: 'right'}} type='primary' size='small'
                onClick={(e) => this.showContent(name, relation, mobile, content)}>{buttonContact}</Button>
      </div>
    </div>
  }

  // 表单提交
  showContent (name, relation, mobile, content) {
    if (content == null || content === '') {
      message.error('Pls entry the content')
      return
    }
    if (content == null || content === '' && relation === 'Self') {
      message.error('Pls entry the content')
      return
    }

    this.send(name, relation, mobile, content)
  }

  send (name, relation, mobile, content) {
    const self = this;
    fetchPost('/audit/operate/phone/remark', {
      auditNo: this.state.id,
      name,
      relation,
      mobile,
      content,
    }).then(json => {
      if (json.code === 0) {
        message.info('Add Success')
        self.getData();
      } else {
        message.error(json.msg)
      }
    })
  }

  handleVisibleChange = (visible) => {
    console.log("--popover--", visible);
  }

  renderContact() {
    if (this.state.data == null) {
      return <div></div>
    }
    const data = this.state.data;
    console.log(data, "======");
    let content = [];
    let i = 0;
    data.map(d => {
      if (i === 0) {
        content.push(
            <div key={d.relation}>
              <div key={d.relation} className={Styles.oneLineContent}>
                <span style={{width: '20%'}}>Relatives</span>
                :
                <span style={{width: '80%', paddingLeft: 5}}>{d.relation}</span>
              </div>
              <div key={d.name} className={Styles.oneLineContent}>
                <span style={{width: '20%'}}>Name</span>
                :
                <span style={{width: '80%', paddingLeft: 5}}>{d.name}</span>
              </div>
              <div key={d.mobile} className={Styles.oneLineContent}>
                <span style={{width: '20%'}}>Mobile</span>
                :
                <span style={{width: '80%', paddingLeft: 5}}>{d.mobile}</span>
              </div>
            </div>
        );
      } else if (i == 1) {
        content.push(
          <div key={d.relation}>
            <div key={d.relation} className={Styles.oneLineContent}>
              <span style={{width: '20%'}}>Friend or Colleague</span>
              :
              <span style={{width: '80%', paddingLeft: 5}}>{d.relation}</span>
            </div>
            <div key={d.name} className={Styles.oneLineContent}>
              <span style={{width: '20%'}}>Name</span>
              :
              <span style={{width: '80%', paddingLeft: 5}}>{d.name}</span>
            </div>
            <div key={d.mobile} className={Styles.oneLineContent}>
              <span style={{width: '20%'}}>Mobile</span>
              :
              <span style={{width: '80%', paddingLeft: 5}}>{d.mobile}</span>
            </div>
          </div>
        );
      }
      i ++;
    });
    return content;
  }

  render () {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: 'Relationship',
        dataIndex: 'relation',
        key: 'relation'
      },
      {
        title: 'Mobile',
        dataIndex: 'mobile',
        render: (text, record) => (
          <span>{record.mobile}</span>
        )
      }
    ]

    return (
      <div className={Styles.detailModule}>
        <Card extra={this.message()} bodyStyle={{padding: 0}} noHovering={true}>
          {this.renderContact()}
        </Card>
      </div>
    )
  }
}

export default Contact
